<template>
    <div class="account-login">
        <a-row justify="center"  style="height: 100vh">
            <a-col
                :xs="16"
                :sm="9"
                :md="8"
                :lg="7"
                :xl="6"
                :xxl="5"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center"
            >
                <h1 class="title">文章仓库系统</h1>
                <a-form style="width: 100%" layout="horizontal" :model="formState" :rules="rules" @finish="handleFinish">
                    <a-form-item name="username">
                        <a-input v-model:value="formState.username" size="large" placeholder="请输入用户名">
                            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="password">
                        <a-input v-model:value="formState.password" size="large" type="password" placeholder="请输入密码">
                            <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-row>
                            <a-button
                                style="flex: 1; margin-top: 15px"
                                type="primary"
                                html-type="submit"
                                size="large"
                                :loading="loginLoading"
                            >
                                用户登陆
                            </a-button>
                        </a-row>
                    </a-form-item>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>
<script lang="ts" setup>
    import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
    import useLogin from "@/hooks/useLogin";
    const rules:any = {
        password: { required: true, trigger: "blur", message: "请输入用户名" },
        username: { required: true, trigger: "blur", message: "请输入密码" }
    };

    const { loginState: formState, loginLoading, handleFinish } = useLogin();
</script>

<style lang="scss">
    .account-login {
        height: 100vh;
        width: 100vw;
    }
    .account-login::after {
        content: "";
        display: block;
        height: 100%;
        width: 50%;
        right: 0;
        top: 0;
        position: absolute;
        z-index: -1;
        background-image: url("@/assets/images/bg-login-right.png");
        background-repeat: no-repeat; // 不平铺
        background-position: bottom; // 背景位置
        background-size: 100%; // 背景缩放
    }
    .account-login::before {
        content: "";
        display: block;
        height: 100%;
        width: 50%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: -1;
        background-image: url("@/assets/images/bg-login-left.png");
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100%;
    }
    .title {
        font-size: 30px;
        text-shadow: 0px 2px 14px rgb(209, 236, 251);
        user-select: none;
        text-align: center;
        margin-bottom: 30px;
    }
</style>
